<template>
  <f7-page>
    <f7-navbar :title="$t('m.ad1')" back-link=" "></f7-navbar>
    <div class="content-padding margin-t20">
      <h3>{{details.title}}</h3>
      <p>{{$moment(details.add_time * 1000).format('YYYY-MM-DD HH:mm')}}</p>

      <img :src="details.pic" alt="">
      <div class="margin-t20" v-html="details.content"></div>
    </div>
  </f7-page>
</template>

<script>
  import { getArticleDetails } from "../api/my";

  export default {
    name: "article-details",
    data() {
      return {
        details: {}
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getArticleDetails({art_id: this.$f7route.context.id}).then(res => {
          this.details = res.data;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    h3 {
      text-align: center;
      padding-bottom: $padding;
    }
    p {
      color: $colorGrey;
      text-align: right;
    }
  }
</style>
